<template>
  <div class="CCAcontainer">
    <!-- 消费分析 统计 -->
    <div class="statistics">
      <el-row>
        <el-button @click="$emit('fade')">返回列表</el-button>
      </el-row>
      <el-row class="statisticsBox">
        <el-col :span="6"
          ><div class="grid-content bg-purple">用户ID：{{ personRow.u_id }}</div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">用户昵称：{{ personRow.u_name }}</div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">联系电话：{{ personRow.phone }}</div></el-col
        >
      </el-row>
    </div>

    <!-- 图表区域 -->
    <div class="chartBox">
      <!-- 用户消费情况 -->
      <el-row>
        <el-col>用户消费情况</el-col>
      </el-row>
      <el-row>
        <el-col
          >日期 : <el-date-picker v-model="value" type="date" placeholder="选择日期"> </el-date-picker><span class="zhi">至</span
          ><el-date-picker v-model="value" type="date" placeholder="选择日期"> </el-date-picker
        ></el-col>
      </el-row>

      <!-- 饼状图容器 -->
      <div id="main"></div>

      <!-- 统计 -->
      <div class="count">
        <div>订单总量 : {{ personRow.order_num }}</div>
        <div>订单总额 : {{ personRow.money }}元</div>
      </div>
    </div>

    <!-- 表格渲染区域 -->
    <el-card class="main">
      <el-table :data="userShop" style="width: 100%">
        <el-table-column prop="id" label="商户编号"></el-table-column>
        <el-table-column prop="store_name" label="商户名"> </el-table-column>
        <el-table-column prop="business" label="行业"> </el-table-column>
        <el-table-column prop="count" label="订单商品数量"> </el-table-column>
        <el-table-column prop="money" label="订单金额"> </el-table-column>
        <el-table-column prop="time" label="消费日期"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
export default {
  name: 'CCA',
  props: {
    isConsumptionAnalyzeShow: {
      type: Boolean,
      required: true
    },
    personRow: {
      type: Object,
      required: true
    }
  },
  created() {
    this.loadUserShop()
  },
  data() {
    return {
      // 图表option
      option: {
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      // 利用用户ID匹配的用户消费数据
      userShop: [],
      // 时间选择数据绑定
      value: this.personRow.time
    }
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},
  beforeUpdate() {
    var myChart = echarts.init(document.getElementById('main'))
    myChart.setOption(this.option)
  },
  methods: {
    async loadUserShop() {
      const { data } = await this.$http.get(`/chartDatas?id=${this.personRow.u_id}`)
      this.userShop = data[0].shopInStores
      // console.log(data[0].shopInStores)

      // // option配置data数据
      // var optionData = []
      this.userShop.forEach((item) => {
        this.option.series[0].data.push({
          name: item.business + '\n\n' + item.money + '元',
          value: item.money
        })
      })
      // this.option.series[0].data = optionData
    }
  },

  watch: {}
}
</script>
<style lang='less' scoped>
.CCAcontainer {
  width: 100%;
  .statistics {
    border-bottom: 1px solid #797979;
    margin: 15px 15px 0;
    font-size: 14px;
    color: #606266;
    .statisticsBox {
      line-height: 60px;
      color: #606266;
    }
  }

  .chartBox {
    font-size: 14px;
    color: #606266;
    position: relative;
    left: 0;
    border-bottom: 1px solid #797979;
    margin: 0 15px 0;
    #main {
      width: 400px;
      height: 300px;
      margin: auto;
    }

    .el-row {
      margin-top: 17px;
    }

    .zhi {
      padding: 0 5px;
    }

    .count {
      position: absolute;
      right: 380px;
      bottom: 80px;
      width: 150px;
      font-size: 14px;
      color: #606266;
      div {
        margin-top: 5px;
      }
    }
  }
}
</style>
